{% extends "admin/base.html" %}
{% load static %}
{% block extrastyle %}{{ block.super }}<link rel="stylesheet" href="{% static 'unfold/fonts/material-symbols/styles.css' %}"><link rel="stylesheet" href="{% static 'css/admin.css' %}">{% endblock %}
{% block content %}
<div class="k4w-preview-page">
  <section class="k4w-preview-hero">
    <div>
      <span class="k4w-preview-eyebrow">RELAÇÃO COM CLIENTES · TESTES SEGUROS</span>
      <h1>Pré-visualizar como cliente</h1>
      <p>Abra a área privada de qualquer cliente sem terminar a sessão administrativa e sem utilizar ou conhecer a palavra-passe dessa conta.</p>
      <div class="k4w-preview-tags"><span>Sessão admin preservada</span><span>Auditoria ativa</span><span>Modo só de leitura por defeito</span></div>
    </div>
    <aside>
      <span class="material-symbols-outlined">switch_account</span>
      <small>Portal</small>
      <strong>V{{ version }}</strong>
    </aside>
  </section>

  {% if current_preview %}
  <section class="k4w-preview-current">
    <span class="material-symbols-outlined">visibility</span>
    <div><strong>Pré-visualização ativa: {{ current_preview.client.name }}</strong><p>{{ current_preview.user.username }} · {{ current_preview.get_role_display }}</p></div>
    <a href="{% url 'client_portal:dashboard' %}">Abrir portal</a>
    <a class="is-secondary" href="{% url 'client_preview_stop' %}">Terminar</a>
  </section>
  {% endif %}

  <section class="k4w-preview-toolbar">
    <form method="get">
      <span class="material-symbols-outlined">search</span>
      <input type="search" name="q" value="{{ query }}" placeholder="Pesquisar cliente, utilizador ou email">
      <button type="submit">Pesquisar</button>
      {% if query %}<a href="{% url 'client_preview_center' %}">Limpar</a>{% endif %}
    </form>
    <div><span class="material-symbols-outlined">info</span><p>O modo interativo permite criar respostas, comprovativos e tickets como teste. Está disponível apenas para superutilizadores.</p></div>
  </section>

  <div class="k4w-preview-grid">
    {% for access in accesses %}
    <article class="k4w-preview-card {% if not access.is_active or not access.user.is_active or not access.client.portal_access_enabled %}is-disabled{% endif %}">
      <header>
        <span class="k4w-preview-avatar">{{ access.client.name|first|upper }}</span>
        <div><h2>{{ access.client.name }}</h2><p>{{ access.display_name }} · {{ access.user.username }}</p></div>
        <span class="k4w-preview-state {% if access.is_active and access.user.is_active and access.client.portal_access_enabled %}is-active{% else %}is-inactive{% endif %}">{% if access.is_active and access.user.is_active and access.client.portal_access_enabled %}Ativo{% else %}Indisponível{% endif %}</span>
      </header>
      <dl>
        <div><dt>Perfil</dt><dd>{{ access.get_role_display }}</dd></div>
        <div><dt>Email</dt><dd>{{ access.user.email|default:access.client.email|default:"—" }}</dd></div>
        <div><dt>Financeiro</dt><dd>{% if access.can_view_financial %}Visível{% else %}Oculto{% endif %}</dd></div>
        <div><dt>Documentos</dt><dd>{% if access.can_view_documents %}Visíveis{% else %}Ocultos{% endif %}</dd></div>
        <div><dt>Tickets</dt><dd>{% if access.can_manage_tickets %}Pode gerir{% else %}Só consulta{% endif %}</dd></div>
        <div><dt>Último acesso</dt><dd>{{ access.last_portal_login_at|date:"d/m/Y H:i"|default:"Nunca" }}</dd></div>
      </dl>
      <footer>
        {% if access.is_active and access.user.is_active and access.client.portal_access_enabled %}
        <form method="post" action="{% url 'client_preview_start' access.pk %}">{% csrf_token %}<input type="hidden" name="mode" value="readonly"><button type="submit"><span class="material-symbols-outlined">visibility</span>Pré-visualizar</button></form>
        {% if request.user.is_superuser %}<form method="post" action="{% url 'client_preview_start' access.pk %}" onsubmit="return confirm('O modo interativo pode alterar dados fictícios ou reais. Continuar?')">{% csrf_token %}<input type="hidden" name="mode" value="interactive"><button class="is-warning" type="submit"><span class="material-symbols-outlined">science</span>Teste interativo</button></form>{% endif %}
        {% else %}<span>Ative o utilizador e o acesso ao portal para testar.</span>{% endif %}
      </footer>
    </article>
    {% empty %}<section class="k4w-preview-empty"><span class="material-symbols-outlined">person_search</span><h2>Não foram encontrados acessos</h2><p>Altere a pesquisa ou crie uma conta de portal para o cliente.</p></section>{% endfor %}
  </div>
</div>
{% endblock %}